<script>
export default {
  name: 'Aaa',
  functional: true,
  props: {
    item: {
      type: Object,
      required: true
    }
    // title: {
    //   type: String,
    //   default: ""
    // }
  },
  render(h, context) {
    const { item } = context.props
    const fn = item => {
      if (item.children && item.children.length) {
        return (
          <el-submenu index={item.path}>
            <template slot='title'>{item.name}</template>
            {item.children.map(subItem => fn(subItem))}
          </el-submenu>
        )
      } else {
        return <el-menu-item index={item.path}>{item.name}</el-menu-item>
      }
    }
    return fn(item)
    // console.log(item)
    // if (item.children && item.children.length) {
    //   console.log(item.children)
    //   return (
    //     <el-submenu index="2">
    //       <template slot="title">{item.name}</template>
    //       {item.children.map(subItem => (
    //         <aaa index={subItem.path}>{subItem.name}</aaa>
    //       ))}
    //     </el-submenu>
    //   )
    // } else {
    //   return <el-menu-item index={item.path}>{item.name}</el-menu-item>
    // }

    // const vnodes = []
    // if (icon) {
    //   vnodes.push(<svg-icon icon-class={icon} />)
    // }

    // if (title) {
    //   vnodes.push(<span slot="title">{title}</span>)
    // }
    // return vnodes
  }
}
</script>
